<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">



    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <meta name="mobile-web-app-capable" content="yes">
    <title>Predominant Educational Attainment</title>

    <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <link rel="stylesheet" href="//js.arcgis.com/3.17/esri/css/esri.css" />
    <style>
        /*
         * --------------------------------------------------------------------
         * The code within this style block would ideally go into an external
         * stylesheet such as:
         * <link rel="stylesheet" href="./css/app.css" />
         * --------------------------------------------------------------------
         */
        html, body, #ui-map-page, #ui-map-content, #ui-map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #ui-settings-page {
            width: 100%;
            height: 100%;
            padding: 0;
        }

        #ui-settings-content {
            margin: 1.25em;
        }

        /* zoom slider */
        .esriSimpleSlider div {
            width: 1.125em;
            height: 1.125em;
            font-size: 1.875em;
            line-height: 0.9375em;
        }

        .esriSimpleSliderHorizontal.esriSimpleSliderBR {
            right: 0.3125em;
            bottom: 1.625em;
        }

        @media screen and (min-width: 768px) {
            .esriSimpleSliderHorizontal.esriSimpleSliderBR {
                bottom: 2.875em;
            }
        }

        /* Search dijit */

        .arcgisSearch {
            display: block;
            top: 1.25em;
            left: 0.625em;
            right: 0.625em;
            position: absolute;
            height: 3.75em;
            width: auto;
            font-size: 1em;
            line-height: 1.25em;
            z-index: 3;
        }

        @media (min-device-width: 22.5625em) {
            .arcgisSearch {
                width: 22.5em;
            }
        }

        @media screen and (min-width: 768px) {
            .arcgisSearch {
                margin: 0 auto;
            }
        }

        .arcgisSearch .searchGroup {
            font-family: HelveticaNeue-Light, Roboto, Helvetica, Arial, san-serif;
            line-height: 22px;
            font-size: 1.1875em;
        }

        /* LocateButton dijit */

        .LocateButton .zoomLocateButton {
            background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%22-3%20-3%2020%2020%22%20enable-background%3D%22new%20-3%20-3%2020%2020%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20fill%3D%22%2357585A%22%20d%3D%22M7-3C3.8-3%2C1.3-0.4%2C1.3%2C2.7C1.3%2C5.6%2C7%2C17%2C7%2C17s5.7-11.4%2C5.7-14.3C12.7-0.4%2C10.2-3%2C7-3z%20M7%2C5.6%0A%09c-1.6%2C0-2.9-1.3-2.9-2.9S5.4-0.1%2C7-0.1s2.9%2C1.3%2C2.9%2C2.9S8.6%2C5.6%2C7%2C5.6z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
            background-size: 1.5625em;
            position: absolute;
            right: 0.3125em;
            bottom: 4.0625em;
            z-index: 3;
            background-color: #FFFFFF;
            border: 1px solid #57585A;
        }

        @media screen and (min-width: 768px) {
            .LocateButton .zoomLocateButton {
                bottom: 5.3125em;
            }
        }

        .LocateButton .zoomLocateButton:hover {
            background-size: 1.5625em;
            background-color: #EEEEEE;
            color: #4C4C4C;
        }

        .LocateButton .tracking {
            background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%22-3%20-3%2020%2020%22%20enable-background%3D%22new%20-3%20-3%2020%2020%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22normal%22%20display%3D%22none%22%3E%0A%09%3Cpath%20display%3D%22inline%22%20fill%3D%22%2357585A%22%20d%3D%22M7-3C3.8-3%2C1.3-0.4%2C1.3%2C2.7C1.3%2C5.6%2C7%2C17%2C7%2C17s5.7-11.4%2C5.7-14.3C12.7-0.4%2C10.2-3%2C7-3z%0A%09%09%20M7%2C5.6c-1.6%2C0-2.9-1.3-2.9-2.9S5.4-0.1%2C7-0.1s2.9%2C1.3%2C2.9%2C2.9S8.6%2C5.6%2C7%2C5.6z%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20id%3D%22hover%22%3E%0A%09%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M7-3C3.8-3%2C1.3-0.4%2C1.3%2C2.7C1.3%2C5.6%2C7%2C17%2C7%2C17s5.7-11.4%2C5.7-14.3C12.7-0.4%2C10.2-3%2C7-3z%20M7%2C5.6%0A%09%09c-1.6%2C0-2.9-1.3-2.9-2.9S5.4-0.1%2C7-0.1s2.9%2C1.3%2C2.9%2C2.9S8.6%2C5.6%2C7%2C5.6z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
            background-size: 1.5625em;
            background-color: #EEEEEE;
        }

        /* Settings button */

        #ui-settings-button {
            z-index: 3;
            right: -15px;
            width: 1.875em;
            height: 1.875em;
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            padding: 0.125em;
            background-size: 1.5625em;
            background-repeat: no-repeat;
            background-position: center;
            background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220.04257%20-0.00098%2018%2016.95918%22%20enable-background%3D%22new%200.04257%20-0.00098%2018%2016.95918%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20id%3D%22normal%22%20fill%3D%22%2357585A%22%20d%3D%22M2.16709%2C3.20293h13.64494c0.59759%2C0%2C1.09558-0.49799%2C1.09558-1.09558%0A%09s-0.49799-1.09558-1.09558-1.09558H2.16709C1.5695%2C0.91217%2C1.07151%2C1.41016%2C1.07151%2C2.00775S1.5695%2C3.20293%2C2.16709%2C3.20293z%0A%09%20M15.91162%2C5.32674H2.16709c-0.59759%2C0-1.09558%2C0.49799-1.09558%2C1.09558S1.5695%2C7.5179%2C2.16709%2C7.5179h13.64494%0A%09c0.69719%2C0%2C1.19518-0.49799%2C1.19518-1.09558S16.50921%2C5.32674%2C15.91162%2C5.32674z%20M15.91162%2C9.57493H2.16709%0A%09c-0.59759%2C0-1.09558%2C0.49799-1.09558%2C1.09558c0%2C0.59759%2C0.49799%2C1.09558%2C1.09558%2C1.09558h13.64494%0A%09c0.59759%2C0%2C1.09558-0.49799%2C1.09558-1.09558C17.0072%2C10.07293%2C16.50921%2C9.57493%2C15.91162%2C9.57493z%20M15.94501%2C13.80961H2.20047%0A%09c-0.59759%2C0-1.09558%2C0.49799-1.09558%2C1.09558c0%2C0.59759%2C0.49799%2C1.09558%2C1.09558%2C1.09558h13.64494%0A%09c0.59759%2C0%2C1.09558-0.49799%2C1.09558-1.09558C17.04059%2C14.3076%2C16.5426%2C13.80961%2C15.94501%2C13.80961z%22%2F%3E%0A%3Cg%20id%3D%22hover%22%20display%3D%22none%22%3E%0A%09%3Cpath%20display%3D%22inline%22%20fill%3D%22%23FFFFFF%22%20d%3D%22M0.1%2C3.6h13.7c0.6%2C0%2C1.1-0.5%2C1.1-1.1s-0.5-1.1-1.1-1.1H0.1C-0.5%2C1.3-1%2C1.8-1%2C2.4%0A%09%09S-0.5%2C3.6%2C0.1%2C3.6z%20M13.9%2C5.9H0.1C-0.5%2C5.9-1%2C6.4-1%2C7s0.5%2C1.1%2C1.1%2C1.1h13.7C14.5%2C8.1%2C15%2C7.6%2C15%2C7S14.5%2C5.9%2C13.9%2C5.9z%20M13.9%2C10.4%0A%09%09H0.1c-0.6%2C0-1.1%2C0.5-1.1%2C1.1s0.5%2C1.1%2C1.1%2C1.1h13.7c0.6%2C0%2C1.1-0.5%2C1.1-1.1C15%2C10.9%2C14.5%2C10.4%2C13.9%2C10.4z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
            background-color: #FFFFFF;
            border: 1px solid #57585A;
            border-radius: 0.3125em;
        }

        #ui-settings-button:hover {
            background-color: #EEEEEE;
            color: #4C4C4C;
        }

        .basemapOption:last-child {
            padding-bottom: 1.25em;
        }

        .basemapOptionSelected {
            background-color: #333333;
            color: #f6f6f6;
        }

        .basemapOptionNormal {
            background-color: #f6f6f6;
            color: #333333;
        }

        /* PopupMobile dijit */

        .esriMobileNavigationBar {
            z-index: 3;
            background: #EEEEEE;
        }

        .esriMobileNavigationBar .esriMobileNavigationItem.right {
            padding-right: 0.3125em;
        }

        .esriMobileNavigationBar .esriMobileNavigationItem.right img {
            background-position: center;
            background-repeat: no-repeat;
            background-size: 1.25em;
            background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2018.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%22-298%20390%2014%2014%22%20enable-background%3D%22new%20-298%20390%2014%2014%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%22-289%2C397%20-289%2C390%20-293%2C390%20-293%2C397%20-298%2C397%20-291%2C404%20-284%2C397%20%22%2F%3E%0A%3C%2Fsvg%3E%0A");
        }

        .esriMobileNavigationBar .esriMobileNavigationItem.left {
            padding-left: 0.3125em;
        }

        .esriMobileNavigationBar .esriMobileNavigationItem.left img {
            background-position: center;
            background-repeat: no-repeat;
            background-size: 1.25em;
            background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2018.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%22-298%20390%2014%2014%22%20enable-background%3D%22new%20-298%20390%2014%2014%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%22-284%2C393%20-287%2C390%20-291%2C394%20-295%2C390%20-298%2C393%20-294%2C397%20-298%2C401%20-295%2C404%20-291%2C400%20-287%2C404%20%0A%09-284%2C401%20-288%2C397%20%22%2F%3E%0A%3C%2Fsvg%3E%0A");
        }

        .esriMobileNavigationBar .esriMobileNavigationItem.center {
            text-shadow: none;
            color: #4C4C4C;
        }

        .esriPopupMobile {
            box-shadow: none;
            -webkit-box-shadow: none;
        }

        .esriPopupMobile .titlePane {
            background: none repeat scroll 0 0 #FFFFFF;
            color: #57585A;
            border: 1px solid #57585A;
        }

        .esriPopupMobile .titleButton.prev {
            top: 26px;
            left: 76px;
            width: 18px;
            height: 11px;
            /* color: 57585A */
            background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2018.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%22-300%20391.5%2018%2011%22%20enable-background%3D%22new%20-300%20391.5%2018%2011%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22next%22%20display%3D%22none%22%3E%0A%09%3Cpolygon%20display%3D%22inline%22%20fill%3D%22%2357585A%22%20points%3D%22-296.9%2C394.8%20-291.3%2C397%20-296.8%2C399.2%20-296.8%2C402.5%20-282.5%2C397%20-296.8%2C391.5%20%09%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20id%3D%22previous%22%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%22-282.5%2C399.2%20-288.1%2C397%20-282.5%2C394.8%20-282.5%2C391.5%20-296.9%2C397%20-282.5%2C402.5%20%09%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
        }

        .esriPopupMobile .titleButton.next {
            top: 26px;
            right: 76px;
            width: 18px;
            height: 11px;
            background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2018.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%22-300%20391.5%2018%2011%22%20enable-background%3D%22new%20-300%20391.5%2018%2011%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%22-296.9%2C394.8%20-291.3%2C397%20-296.8%2C399.2%20-296.8%2C402.5%20-282.5%2C397%20-296.8%2C391.5%20%22%2F%3E%0A%3C%2Fsvg%3E%0A");
        }

        .esriMobileNavigationBar .esriMobileNavigationItem.right1 {
            width: 32px;
            height: 32px;
            float: right;
            position: absolute;
            right: 36px;
            top: 0;
        }

        .esriMobileNavigationBar .esriMobileNavigationItem.right1 img {
            background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2018.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%22-307%20381%2032%2032%22%20enable-background%3D%22new%20-307%20381%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22previous%22%20display%3D%22none%22%3E%0A%09%3Cpolygon%20display%3D%22inline%22%20fill%3D%22%2357585A%22%20points%3D%22-282.6%2C407.1%20-292.7%2C397%20-282.6%2C386.8%20-286.9%2C382.5%20-301.4%2C397%20-286.9%2C411.5%20%09%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20id%3D%22next%22%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%22-301.4%2C386.8%20-291.3%2C397%20-301.4%2C407.1%20-297.1%2C411.5%20-282.6%2C397%20-297.1%2C382.5%20%09%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
        }

        .esriMobileNavigationBar .esriMobileNavigationItem.right2 {
            width: 32px;
            height: 32px;
            float: right;
            position: absolute;
            right: 74px;
            top: 0;
        }

        .esriMobileNavigationBar .esriMobileNavigationItem.right2 img {
            background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2018.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%22-307%20381%2032%2032%22%20enable-background%3D%22new%20-307%20381%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22previous%22%3E%0A%09%3Cpolygon%20fill%3D%22%2357585A%22%20points%3D%22-282.6%2C407.1%20-292.7%2C397%20-282.6%2C386.8%20-286.9%2C382.5%20-301.4%2C397%20-286.9%2C411.5%20%09%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20id%3D%22next%22%20display%3D%22none%22%3E%0A%09%3Cpolygon%20display%3D%22inline%22%20fill%3D%22%2357585A%22%20points%3D%22-301.4%2C386.8%20-291.3%2C397%20-301.4%2C407.1%20-297.1%2C411.5%20-282.6%2C397%20-297.1%2C382.5%20%09%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
        }

        .esriPopupMobile .titleButton.close {
            background-size: 2.1875em;
            background-position: center;
            background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22close-button%22%3E%0A%09%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%2357585A%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20cx%3D%2215.95833%22%20cy%3D%2215.58333%22%20r%3D%2213.25%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%2357585A%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20x1%3D%229.58333%22%20y1%3D%229.58333%22%20x2%3D%2222.45833%22%20y2%3D%2222.45833%22%2F%3E%0A%09%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%2357585A%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20x1%3D%229.58333%22%20y1%3D%2222.45833%22%20x2%3D%2222.45833%22%20y2%3D%229.58333%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
        }

        .esriPopupMobile .titleButton.arrow {
            background-position: center;
            background-size: 2.1875em;
            background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2018.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22close-button%22%20display%3D%22none%22%3E%0A%09%3Ccircle%20display%3D%22inline%22%20fill%3D%22none%22%20stroke%3D%22%2357585A%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20cx%3D%2216%22%20cy%3D%2215.6%22%20r%3D%2213.2%22%2F%3E%0A%09%0A%09%09%3Cline%20display%3D%22inline%22%20fill%3D%22none%22%20stroke%3D%22%2357585A%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20x1%3D%229.6%22%20y1%3D%229.6%22%20x2%3D%2222.5%22%20y2%3D%2222.5%22%2F%3E%0A%09%0A%09%09%3Cline%20display%3D%22inline%22%20fill%3D%22none%22%20stroke%3D%22%2357585A%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20x1%3D%229.6%22%20y1%3D%2222.5%22%20x2%3D%2222.5%22%20y2%3D%229.6%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20id%3D%22arrow-right%22%3E%0A%09%3Ccircle%20display%3D%22none%22%20fill%3D%22none%22%20stroke%3D%22%2357585A%22%20stroke-miterlimit%3D%2210%22%20cx%3D%2216%22%20cy%3D%2215.6%22%20r%3D%2213.2%22%2F%3E%0A%09%3Cg%3E%0A%09%09%3Cline%20display%3D%22none%22%20fill%3D%22none%22%20stroke%3D%22%2357585A%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2216%22%20y1%3D%2216%22%20x2%3D%2222.5%22%20y2%3D%2222.5%22%2F%3E%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%2357585A%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2220%22%20y1%3D%2215.5%22%20x2%3D%2212%22%20y2%3D%227.6%22%2F%3E%0A%09%09%3Cline%20fill%3D%22none%22%20stroke%3D%22%2357585A%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2211.8%22%20y1%3D%2223.5%22%20x2%3D%2220.4%22%20y2%3D%2214.7%22%2F%3E%0A%09%09%3Cline%20display%3D%22none%22%20fill%3D%22none%22%20stroke%3D%22%2357585A%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2222.5%22%20y1%3D%229.6%22%20x2%3D%2216%22%20y2%3D%2216%22%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
        }

        .esriPopupMobile .pointer.top {
            top: -11px;
            background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2018.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2024%2012%22%20enable-background%3D%22new%200%200%2024%2012%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22pointer-bottom%22%20display%3D%22none%22%3E%0A%09%3Cg%20display%3D%22inline%22%3E%0A%09%09%3Cpolyline%20points%3D%220%2C-0.5%2011.48108%2C11.5%2024%2C-0.5%200%2C-0.5%20%09%09%22%2F%3E%0A%09%3C%2Fg%3E%0A%09%3Cg%20display%3D%22inline%22%3E%0A%09%09%3Cpolyline%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23333333%22%20stroke-miterlimit%3D%2210%22%20points%3D%220%2C-0.5%2011.48108%2C11.5%2024%2C-0.5%200%2C-0.5%20%09%09%22%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3Cg%20id%3D%22pointer-top%22%3E%0A%09%3Cg%3E%0A%09%09%3Cpolyline%20points%3D%2224%2C13.5%2012.51892%2C1.5%200%2C13.5%2024%2C13.5%20%09%09%22%2F%3E%0A%09%3C%2Fg%3E%0A%09%3Cg%3E%0A%09%09%3Cpolyline%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23333333%22%20stroke-miterlimit%3D%2210%22%20points%3D%2224%2C13.5%2012.51892%2C1.5%200%2C13.5%2024%2C13.5%20%09%09%22%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
        }

        .esriPopupMobile .pointer.bottom {
            bottom: -11px;
            background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2018.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2024%2012%22%20enable-background%3D%22new%200%200%2024%2012%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22pointer-bottom%22%3E%0A%09%3Cg%3E%0A%09%09%3Cpolyline%20points%3D%220%2C-0.5%2011.48108%2C11.5%2024%2C-0.5%200%2C-0.5%20%09%09%22%2F%3E%0A%09%3C%2Fg%3E%0A%09%3Cg%3E%0A%09%09%3Cpolyline%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23333333%22%20stroke-miterlimit%3D%2210%22%20points%3D%220%2C-0.5%2011.48108%2C11.5%2024%2C-0.5%200%2C-0.5%20%09%09%22%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3Cg%20id%3D%22pointer-top%22%20display%3D%22none%22%3E%0A%09%3Cg%20display%3D%22inline%22%3E%0A%09%09%3Cpolyline%20points%3D%2224%2C13%2012.51892%2C1%200%2C13%2024%2C13%20%09%09%22%2F%3E%0A%09%3C%2Fg%3E%0A%09%3Cg%20display%3D%22inline%22%3E%0A%09%09%3Cpolyline%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23333333%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20points%3D%2224%2C13%2012.51892%2C1%200%2C13%2024%2C13%20%09%09%22%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
        }

        .esriMobileInfoView .esriMobileInfoViewSection {
            margin: 0.375em;
            padding: 0.375em;
            border: solid 2px #57585A;
            background-color: rgba(255, 255, 255, 0.75);
            -webkit-border-radius: 10px;
            -webkit-box-sizing: border-box;
        }

        .esriMobileInfoViewItem {
            margin: 0px;
            padding-top: 0.5em;
            padding-left: 0.5em;
            color: #262626;
        }

        .infoTemplateContentRowLabel {
            font-weight: bold;
            line-height: 2em;
            vertical-align: middle;
            width: 20em;
            display: inline-block;
        }

        .infoTemplateContentRowItem {
            line-height: 2em;
            padding-left: 0.5em;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div data-role="page" id="ui-map-page">

    <div id="ui-map-content">
        <div id="ui-map"></div>
        <div id="ui-dijit-search"></div>
        <div id="ui-dijit-locatebutton"></div>
        <a id="ui-settings-button" href="#ui-settings-panel" class="SettingsButton ui-btn"></a>
    </div>


    <div data-role="panel" id="ui-settings-panel" data-theme="a" data-position="right" data-display="push"
         data-position-fixed="true">
        <ul data-role="listview">
            <li data-role="list-divider">Map Options</li>
            <li class="basemapOption "><a class="ui-btn ui-btn-icon-custom" data-basemapname="topo">Topographic</a></li>
            <li class="basemapOption"><a class="ui-btn ui-btn-icon-custom" data-basemapname="streets">Streets</a></li>
            <li class="basemapOption"><a class="ui-btn ui-btn-icon-custom" data-basemapname="hybrid">Satellite</a></li>
            <li class="basemapOption"><a class="ui-btn ui-btn-icon-custom" data-basemapname="gray">Gray</a></li>
            <li class="basemapOption"><a class="ui-btn ui-btn-icon-custom" data-basemapname="dark-gray">Dark Gray</a></li>
            <li data-role="list-divider">Other</li>
            <li data-icon="false"><a id="info" href="#ui-map-about">About</a></li>
            <li data-icon="false"><a id="legend" href="#ui-legend-dialog">Legend</a></li>
            <li data-icon="false"><a href="#" id="ui-home-button" class="ui-btn">Reset map</a></li>
        </ul>
    </div>
</div>


<div id="ui-legend-dialog" data-role="page">
    <div data-role="header" data-add-back-btn="true">
        <h1><span>Legend</span></h1>
    </div>
    <div data-role="content">
        <div id="legendDiv"></div>
    </div>
</div>


<div id="ui-map-about" data-role="page">
    <div data-role="header" data-add-back-btn="true">
        <h1><span id="webmapTitleInfo"></span></h1>
    </div>
    <div data-role="content">
        <div id="contentDiv">
            <div id="mapDetails">
                <img id="mapThumbnail" style="float:left;padding-right:5px;" width="100px;height:67px;" />
                <div id="snippet"></div>
                <div id="description"></div>
            </div>
        </div>
    </div>
</div>


<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="//js.arcgis.com/3.17/"></script>

<script>
    $.mobile.pagecontainer({defaults: true});
    $.mobile.pagecontainer({
        create: function (event, ui){
            console.log("create:", event.type);
            initializeEsriJS();
        }
    });

    function initializeEsriJS(){
        require([
                    "dojo/dom-construct",
                    "dojo/number",
                    "dojo/on",
                    "dojo/parser",
                    "dojo/text!./smart-mapping-renderer.json",
                    "esri/Color",
                    "esri/dijit/HomeButton",
                    "esri/dijit/Legend",
                    "esri/dijit/LocateButton",
                    "esri/dijit/PopupMobile",
                    "esri/dijit/Search",
                    "esri/InfoTemplate",
                    "esri/layers/FeatureLayer",
                    "esri/map",
                    "esri/renderers/UniqueValueRenderer",
                    "esri/request",
                    "esri/symbols/SimpleFillSymbol",
                    "esri/symbols/SimpleLineSymbol"
                ],
                function (domConstruct, number, on, parser, rendererJSON, Color, HomeButton, Legend, LocateButton, PopupMobile, Search,
                          InfoTemplate,
                          FeatureLayer,
                          Map, UniqueValueRenderer, esriRequest, SimpleFillSymbol, SimpleLineSymbol){
                    parser.parse();

                    var search,
                            homeButton,
                            geoLocate,
                            legend,
                            currentItem,
                            arcgisURL = "https://www.arcgis.com/sharing/rest/content/items/",
                            webmap    = "4abe6a830b8f466dacf8abfde567a781";

                    // ----------------------------------------------------
                    // Create the symbology for the selected feature,
                    // when a Popup opens
                    // ----------------------------------------------------
                    var slsHighlightSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([38, 38, 38, 0.7]), 2);
                    var sfs = SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL, slsHighlightSymbol);
                    sfs.setOutline(slsHighlightSymbol);
                    var infoWindowPopup = new PopupMobile({fillSymbol: sfs}, domConstruct.create("div"));

                    // ----------------------------------------------------
                    // InfoTemplate for the FeatureLayer
                    // ----------------------------------------------------
                    var featureLayerInfoTemplate = new InfoTemplate();
                    featureLayerInfoTemplate.setTitle("${PredominantEduAttainment}");
                    var fieldsKeyArray = [
                        "GRADDEG_CY",
                        "BACHDEG_CY",
                        "ASSCDEG_CY",
                        "SMCOLL_CY",
                        "HSGRAD_CY",
                        "SOMEHS_CY",
                        "NOHS_CY",
                        "EDUCBASECY",
                        "PredominantEduAttainment",
                        "PrecentPredominantOfTotal"
                    ];
                    // --------------------------------------------------------------------
                    // Dynamically created after FeatureLayer loads
                    // --------------------------------------------------------------------
                    var fieldsDictionary = {};

                    // ----------------------------------------------------
                    // Formatting functions for infoTemplate
                    // ----------------------------------------------------
                    numberFormatter = function (value, key, data){
                        var dataType = fieldsDictionary[key].type;
                        if (dataType === "esriFieldTypeDouble" && key !== "PrecentPredominantOfTotal") {
                            return number.format(value, {places: 0});
                        }
                        else if (key === "PrecentPredominantOfTotal") {
                            return number.format(value / 100, {places: 0, type: "percent"})
                        }
                        else {
                            return value;
                        }
                    }

                    esriRequest({
                        url: arcgisURL + webmap + "?f=json",
                        handleAs: "json"
                    }).then(function (response){
                                console.log("response", response);
                                currentItem = response;
                                $("#webmapTitle").html(currentItem.title);
                            },
                            function (error){
                                console.log("error", error);
                            });

                    var map = new Map("ui-map", {
                        sliderOrientation: "horizontal",
                        sliderPosition: "bottom-right",
                        basemap: "gray",
                        center: [-73.92, 40.69],
                        zoom: 12,
                        sliderStyle: "small",
                        infoWindow: infoWindowPopup
                    });

                    map.on("load", function (event){

                        var educationFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/NY%20Educational%20Attainment/FeatureServer/0",
                                {
                                    mode: FeatureLayer.MODE_ON_DEMAND,
                                    infoTemplate: featureLayerInfoTemplate,
                                    outFields: fieldsKeyArray
                                });
                        // --------------------------------------------------------------------
                        // These types of renderers can be created using the smartMapping
                        // module in the API Reference
                        // --------------------------------------------------------------------
                        var uvrObject = JSON.parse(rendererJSON).drawingInfo.renderer;
                        var uvr = new UniqueValueRenderer(uvrObject);

                        educationFeatureLayer.setRenderer(uvr);
                        map.addLayer(educationFeatureLayer);

                        educationFeatureLayer.on("load", function (event){

                            var fields = JSON.parse(event.target._json).fields;
                            for (var key in fields) {
                                fieldsDictionary[fields[key].name] = fields[key];
                            }

                            var infoTemplateContent = "";
                            fieldsKeyArray.forEach(function (key){
                                var field = fieldsDictionary[key];
                                infoTemplateContent += "<span class=\"infoTemplateContentRowLabel\">" + field.alias + ":</span>";
                                infoTemplateContent += "<span class=\"infoTemplateContentRowItem\">${" + field.name + ":numberFormatter}</span><br>";
                            });
                            featureLayerInfoTemplate.setContent(infoTemplateContent);

                            educationFeatureLayer.setInfoTemplate(featureLayerInfoTemplate);
                        });

                        legend = new Legend({
                            map: map,
                            layerInfos: [{layer: educationFeatureLayer, title: "Predominant Educational Attainment"}]
                        }, "legendDiv");
                        legend.startup();

                        search = new Search({
                            map: map
                        }, "ui-dijit-search");

                        geoLocate = new LocateButton({
                            map: map
                        }, "ui-dijit-locatebutton");

                        homeButton = new HomeButton({
                            map: map
                        }, "ui-home-button-hidden");

                        search.startup();
                        geoLocate.startup();
                        homeButton.startup();
                    });

                    $('#ui-map-about').bind('pagebeforeshow', function (event, ui){
                        $("#webmapTitleInfo").html(currentItem.title);
                        $("#snippet").html(currentItem.snippet);
                        $("#description").html(currentItem.description);
                        $("#mapThumbnail").attr("src", arcgisURL + currentItem.id + "/info/" + currentItem.thumbnail);
                    });

                    function swapBasemap(event){
                        console.log("basemap", event.target.dataset.basemapname);
                        var _basemapName = event.target.dataset.basemapname;
                        map.setBasemap(_basemapName);
                        $("#ui-settings-panel").panel("close");
                    }

                    $(".basemapOption").click(swapBasemap);

                    $("#ui-home-button").click(function (){
                        homeButton.home();
                        $("#ui-settings-panel").panel("close");
                    });

                    /* remove hard coded img references in the MobilePopup */
                    on(infoWindowPopup, "show", function (event){
                        if ($("*.esriMobileNavigationItem.left > img[src]")) {
                            $("*.esriMobileNavigationItem.left > img").removeAttr("src");
                        }
                        if ($("*.esriMobileNavigationItem.right > img[src]")) {
                            $("*.esriMobileNavigationItem.right > img").removeAttr("src");
                        }
                    });

                    /* remove hard coded img references in the MobilePopup */
                    on(infoWindowPopup, "selection-change", function (event){
                        if ($(".esriMobileNavigationItem.right1 > img[src]")) {
                            $(".esriMobileNavigationItem.right1 > img").removeAttr("src");
                        }
                        if ($(".esriMobileNavigationItem.right2 > img[src]")) {
                            $(".esriMobileNavigationItem.right2 > img").removeAttr("src");
                        }
                    });

                    $(window).on('orientationchange', function (event){
                        window.location.reload();
                    });
                });
    }
</script>
</body>
</html>